<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ year }}</p>
    <ul>
      <li v-for="item in listItem" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="count++">测试按钮 ,{{ doubleCount }}</button>
    <ul>
      <li v-for="curr in newCurrList" :key="curr.id">{{ curr.name }} 汇率为 {{ curr.rate }}</li>
    </ul>
    <button @click="showText">测试内容</button>
  </div>
</template>

<!-- 组合式api -->
<script setup lang="ts">
import { ref, reactive, computed } from "vue";

const count = ref(2);
const year = ref<number | string>("2024");

type ListItem = {
  id: number,
  name: string,
};

type Song = {
  name: string,
  auther: string,
  language?: string // 可为空
}

type Currency = {
  id: string,
  name: string,
  rate: number
}

const listItem = ref<ListItem[]>([]);
listItem.value = [{ id: 100, name: "jacky" }]

const favoit = reactive<Song>({
  name: 'stand by you',
  auther: 'me'
})
favoit.language = 'En'

const doubleCount = computed(() => {
  return count.value * 2
})

const currencies = reactive<Currency[]>([
  { id: '001', name: 'USD', rate: 7.1 },
  { id: '002', name: 'RUB', rate: 76.5 },
  { id: '003', name: 'KZT', rate: 230 },
  { id: '004', name: 'SGD', rate: 1.6 }]
)

const newCurrList = computed(() => {
  return currencies.filter(e => e.rate > 60)
})

const inputChange = (e) => { // 事件类型
  console.log((e.target as HTMLInputElement).value)
}

const showText = (e:Event) =>{
  console.log((e.target as HTMLButtonElement).innerText)
}

</script>

<style></style>
